<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        加了box-sizing:border-box属性，padding和border的值就不会在影响元素的宽高
        相当于把padding和border的值都算在content里盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整
        */
        
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            /* css控制页面文字不能被选中user-select:none; */
            user-select: none;
        }
        
        body {
            margin: 0;
            /* 布局方式 */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        
        .city {
            /* 超出部分隐藏 */
            overflow: hidden;
            position: relative;
            width: 100vw;
            height: 100vh;
        }
        
        .score {
            position: absolute;
            top: 1vmin;
            right: 1vmin;
            font-size: 3vmin;
            z-index: 999;
        }
        
        .start-control {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 5vmin;
            z-index: 999;
        }
        
        .bg_ground {
            --left: 0;
            position: absolute;
            width: 100%;
            height: 100vh;
            bottom: 0;
            left: calc(var(--left) * 1%);
        }
        
        .punkman {
            --left: 1;
            --bottom: 3;
            position: absolute;
            height: 30%;
            left: calc(var(--left) *1%);
            bottom: calc(var(--bottom) * 1%);
        }
        
        .life {
            width: 300px;
            height: 25px;
            border: 1px #c7DF2C solid;
            box-shadow: 0px 2px 2px #D0D5D6;
            border-radius: 10px;
            position: absolute;
            z-index: 999;
            font-size: 1vmin;
            top: 2vmin;
            right: 15vmin;
            background-color: #fff;
        }
        
        #percent {
            background-color: rgb(17, 247, 17);
            width: 20%;
            height: 100%;
            border-radius: 10px;
        }
        
        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div class="city" id="city">
        <div class="life">
            <div id="percent"></div>
        </div>
        <div class="score">得分: <span id="score">0</span></div>
        <div class="start-control" id="start">按任意键继续</div>
        <img src="imgs/full-background.png" class="bg_ground" alt="">
        <img src="imgs/full-background.png" class="bg_ground" alt="">
        <img src="punkrun/run2.png" class="punkman" id="punkman" alt="">
    </div>

    <script>
        function getElementProperty(elem, prop) {
            /* 获取元素当前的样式 */
            let propVal = getComputedStyle(elem).getPropertyValue(prop);

            return parseFloat(propVal) || 0;
        }

        function setElementProperty(elem, prop, value) {
            elem.style.setProperty(prop, value);
        }

        function incrementElementProperty(elem, prop, inc) {
            setElementProperty(elem, prop, getElementProperty(elem, prop) + inc);
        }

        const bgGroundElements = document.querySelectorAll(".bg_ground")
        const punkmanElement = document.querySelector("#punkman")
        const startElement = document.querySelector("#start")

        document.addEventListener("keydown", startHandle)

        const SPEED = 0.005

        function initBgGround() {
            setElementProperty(bgGroundElements[0], "--left", 0)
            setElementProperty(bgGroundElements[1], "--left", 100)
        }

        function updateBgGround(interval) {
            bgGroundElements.forEach(ground => {
                incrementElementProperty(ground, "--left", -1 * SPEED * interval)
                if (getElementProperty(ground, "--left") <= -100) {
                    incrementElementProperty(ground, "--left", 199)
                }
            })
        }

        let lastTime
        let speedScale
        let score

        function startHandle() {
            lastTime = null
            speedScale = 1
            score = 0
            startElement.classList.add('hide')
            initBgGround()
            initPunkMan()
            window.requestAnimationFrame(update);
        }

        function update(time) {
            if (lastTime == null) {
                lastTime = time;
                window.requestAnimationFrame(update);
                return
            }


            const interval = time - lastTime;
            updateBgGround(interval)
            updatePunkman(interval)
            lastTime = time;
            // console.log(interval)
            window.requestAnimationFrame(update);
        }

        // window.requestAnimationFrame(update);

        const PUNKMAN_FRAME_COUNT = 8
        const FRAME_TIME = 50
        let punkmanFrame
        let currentFrameTime

        function initPunkMan() {
            punkmanFrame = 0
            currentFrameTime = 0
            setElementProperty(punkmanElement, '--bottom', 3)
        }

        function updatePunkman(interval) {
            if (currentFrameTime >= FRAME_TIME) {
                punkmanFrame = (punkmanFrame + 1) % PUNKMAN_FRAME_COUNT
                punkmanElement.src = `punkrun/run${punkmanFrame}.png`
                currentFrameTime -= FRAME_TIME
            }

            currentFrameTime += interval
        }
    </script>
</body>

</html>